<template>
	<view>
		<!-- 城市定位 -->
		<view class="center a-center j-sp">
			<view class="city a-center white-bj mar-top10" @tap="open('add',0)">
				<view class="a-center city-box">
					<view class="font-26">{{ city }}</view>
					<uni-icons type="arrowdown" color="#666" size="15" />
				</view>
			</view>
			<view class="search-input a-center black97-bj border-r wid-70">
				<view  class="icon-search black60-zt mar-right15"></view>
				<input type="text" v-model="search" placeholder="小区/写字楼等" :disabled="true" class="font-26 black20-zt wid-100" placeholder-style="color:#808080;font-size:13px"  @tap="open('add',0)"/>
			</view>
		</view>
		<!-- 当前定位 -->
		<view class="position-box center mar-top30 font-26 pad-b-30">
			<view class="black60-zt">当前定位</view>
			<view class="a-center mar-top20 j-sp">
				<view class="font-w-b  black20-zt">{{position}}</view>
				<view class="a-center" @tap="getAuthorize">
					<view class="icon-dingwei font-30 mar-right5"></view>
					<view class="main-zt">重新定位</view>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="black97-bj wid-100 fenge"></view>
		<!-- 已选地址 -->
		<view class="center">
			<view  class="font-26 pad-t-30 pad-b-30 black60-zt">选择已有服务地址</view>
			<!-- 无地址 -->
			<block   v-if="addList.length==0">
				<view class="d-a-j-c addlist-box">
					<view  class="d-a-j-c flex-column">
						<view class="add-img"><image src="../../static/1683800928230-69f31a5ad47f59ce0fbc714c6f8849b5.png" mode="widthFix" lazy-load></image></view>
						<view class="font-24 black50-zt mar-top80">暂未添加地址呀～</view>
					</view>
				</view>
			</block>
			<!-- 有地址 -->
			<block v-for="(item,index) in addList" :key="index" v-else>
				<view  class="item border-b-1-91 pad-b-30  mar-bottom30" @tap="open('selec',item)">
					<view class="font-w-b font-24 line-h35">{{item.city}}{{item.district}}{{item.area}}{{item.address}}{{item.house_number}}</view>
					<view class="black20-zt font-24 mar-top20">{{item.name}}
						<text class="black60-zt mar-left10"> {{item.tel}}</text>
						<text class="black60-zt mar-left10" v-if="item.isdefault==1"> 默认地址</text>
					</view>
				</view>
			</block>
		</view>
		<!-- 添加按钮 -->
		<view class="center border-r-20 main-bj white-zt font-30 text-center line-h90  position-fixed btn_bottom" @tap="open('add',0)">+ 添加地址</view>
	</view>
</template>

<script>
	import QQMapWX from "../../common/qqmap-wx-jssdk.min.js"
	// 腾讯地图Api
	const qqmapsdk = new QQMapWX({
		key: 'BJGBZ-CICCB-SWMUS-JW233-R7B2Z-TYBUX'  ,//这里填写自己申请的key
	});
	export default{
		data(){
			return{
				city: '深圳市',
				keyword:'',
				position:'',
				latitude:undefined,
				longitude:undefined,
				user_id:undefined,
				province:'',
				city:'',
				address:'',
				addList:[]
			}
		},
		onLoad() {
			if(this.$user.state.city!=""){
				this.city=this.$user.state.city
			}
			this.user_id=parseFloat(this.$user.state.userId)
			if(this.$user.state.city==""){
				this.getAuthorize()
			}else{
				this.city=this.$user.state.city
				this.position=this.$user.state.district
				this.latitude=parseFloat(this.$user.state.latitude)
				this.longitude=parseFloat(this.$user.state.longitude)
			}
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		onShow() {
			this.GetAddress()
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods:{
			//打开
			open(type,id){
				switch (type){
					case "add":
						uni.navigateTo({
							url:'/pagesB/address/address?latitude='+this.latitude+'&longitude='+this.longitude+'&id='+id
						})
					break;
					case "edit":
						uni.navigateTo({
							url:'/pagesB/address/address?latitude='+this.latitude+'&longitude='+this.longitude+'&id='+id
						})
					break;
					case "selec":
						uni.showModal({
							title:"提示",
							content:"确定设置这个地址为默认地址吗？",
							cancelText:"取消",
							confirmText:"确定",
							success: (res) => {
								const one={
									mid:this.user_id,
									province:id.province,
									city:id.city,
									district:id.district,
									area:id.area,
									id:id.id,
									latitude:id.latitude.toString(),
									longitude:id.longitude.toString(),
								}
								this.$api.AddressEdit(one).then(item=>{
									if(item.code==0){
										uni.setStorageSync("city",id.city)
										uni.setStorageSync("district",id.district)
										uni.setStorageSync("latitude",id.latitude)
										uni.setStorageSync("longitude",id.longitude)
										uni.navigateBack({
											delta:1
										})
									}
								})
							}
						})
					break;
				}
			},
			//获取用户地址
			async GetAddress(){
				const one={
					aid:1,
					mid:parseFloat(this.$user.state.userId),
					page:1,
					limit:1000
				}
				await this.$api.GetAddressList(one).then(res=>{
					if(res.data.count>0){
						this.addList=res.data.list
					}
				})
			},
			//修改用户地址信息
			async editCity(){
				const one={
					id:this.user_id,
					province:this.province,
					city:this.city,
					area:this.position,
					address:this.address,
					latitude:this.latitude.toString(),
					longitude:this.longitude.toString(),
				}
				await this.$api.EditUserCity(one).then(res=>{
					uni.setStorageSync("city",this.city)
					uni.setStorageSync("district",this.position)
					uni.setStorageSync("latitude",this.latitude)
					uni.setStorageSync("longitude",this.longitude)
				})
			},
			// 3、获取微信定位授权方法
			getAuthorize () {
				uni.authorize({
					scope: 'scope.userLocation',
					success: (res) => {
						this.getLocation()
					},
					fail: (err) => {
						uni.showModal({
							content: '需要授权位置信息',
							confirmText: '确认授权'
						}).then(res => {
							if (res['confirm']) {
								uni.openSetting({
									success: res => {
										if (res.authSetting['scope.userLocation']) {
											uni.showToast({
												title: '授权成功',
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: '授权失败',
												icon: 'none'
											})
										}
										this.getLocation()
									}
								})
							}
							if (res['cancel']) {
								// 取消授权
								this.getLocation()
							}
						})
					}
				})
			},
			// 4、开始获取定位方法
			getLocation () {
				uni.showLoading({
					title:'获取定位中...'
				})
				uni.chooseLocation({
					success: (res) => {
						const { latitude, longitude } = res
						this.latitude=res.latitude
						this.longitude=res.longitude
						qqmapsdk.reverseGeocoder({
							location: latitude ? `${latitude},${longitude }` : '',
							success: (val) => {
						console.log(val)
								this.city=val.result.address_component.city
								this.position=val.result.address_component.district
								this.province=val.result.address_component.province
								this.address=val.result.address_reference.town.title
								//this.position=val.result.address
								uni.hideLoading()
								this.editCity()
							},
							fail: (err) => {
								console.log(err)
								uni.hideLoading()
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	image{
		width: 100%;
		display: block;
	}
	.city{
		width: 140rpx;
		height: 65rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}
	.search-input{
		padding: 0 30rpx;
		line-height: 65rpx;
	}
	.fenge{
		height: 16rpx;
	}
	.addlist-box{
		min-height: 800rpx;
		.add-img{
			width: 400rpx;
		}
	}
	.btn_bottom{
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>